<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>life cycle</title>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 银日 react-dom 用于支持 react 操作 DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入 bable ,用于 Jsx 转为 Js -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>
<body>
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
</body>

<script type="text/babel">
    class Count extends React.Component{

        // state = {count:0}
        // 构造器：一般情况下构造器可以省略不写
        constructor(props) {
            console.log('Count-constructor')
            super(props);
            this.state = {count:0}
        }
        // 组件将要挂载时执行
        componentWillMount(){
            console.log('Count-componentWillMount')
        }
        // 组件挂在完毕时执行
        componentDidMount(){
            console.log('Count-componentDidMount')
        }
        // 控制组件更新的返回是否为真 setState()
        shouldComponentUpdate(){
            console.log('shouldComponentUpdate')
            return true
        }
        // 组件将要更新时执行  forceUpdata()强制更新
        componentWillUpdata(){
            console.log('componentWillUpdata')
        }
        // 组件更新完毕后执行
        componentDidUpdate(){
            console.log('componentDidUpdate')
        }



        // 更新组件
        add = () =>{
            const {count} = this.state
            this.setState({count: count + 1})
        }
        // 强制更新按钮回调
        force = () => {
            this.forceUpdate()
        }
        render(){
            console.log('Count-render')
            const {count} = this.state
            return(
                <div>
                    <h2>当前求和：{count}</h2>
                    <button onClick={this.add}>加1</button>
                    <button onClick={this.force}>不改数据，强制更新</button>
                </div>
            )
        }
    }

    // 父组件
    class A extends React.Component{
        state = {carNane:'奔驰'}
        changerCar = () => {
            this.setState({carNane: '奥迪'})
        }
        render(){
            return(
                <div>
                    <div>我是A</div>
                    <button onClick={this.changerCar}>换车</button>
                    <B carName={this.state.carNane}/>
                </div>
            )
        }
    }
    // 子组件
    class B extends React.Component{

        // 将要接收新props时执行
        coponentWillReceiveProps(props){
            console.log('coponentWillReceiveProps')
        }

        render(){
            return(
                <div>
                    我是B，
                    接收到的车是：{this.props.carName}
                </div>
            )
        }
    }

    ReactDOM.render(<A/>,document.getElementById('test2'))

</script>

</html>